<script setup lang="ts">
import { Button } from 'ant-design-vue'
</script>

<template>
  <div class="xin-container">
    <div class="xin-container-left flex-col flex gap-[24px]">
      <div class="top-content flex flex-col items-center justify-center">
        <div class="flex-1 merchant flex flex-col justify-center">
          <div class="font-16 !text-[#ffffff]">供应商家</div>
          <div>
            <span class="!text-[#ffffff] font-40">1456</span
            ><span class="font-16 !text-[#ffffff]">家</span>
          </div>
        </div>
        <div class="flex-1 number-users flex flex-col justify-center">
          <div class="font-16 !text-[#ffffff]">供应商用户数</div>
          <div>
            <span class="!text-[#ffffff] font-40">1456</span
            ><span class="font-16 !text-[#ffffff]">家</span>
          </div>
        </div>
      </div>
      <div class="supplier-management">
        <div class="font-20 !text-[#ffffff]">供应商管理制度</div>
        <Button style="color: #2172ba; width: 86px; font-size: 16px">去查看</Button>
      </div>
      <div class="breach-trust">
        <div class="font-20 !text-[#ffffff]">供应商管理制度</div>
        <Button style="color: #2172ba; width: 86px; font-size: 16px">去查看</Button>
      </div>
    </div>
    <div class="xin-container-right flex flex-col gap-[24px]">
      <div class="right-top">
        <div class="flex-2">失信供应商</div>
        <div class="flex-2">处理单位</div>
        <div class="flex-1 text-center">状态</div>
        <div class="flex-1 text-center">截止时间</div>
      </div>
      <div class="right-content">
        <div class="flex items-center w-full h-[80px]">
          <div class="flex-2">
            <div></div>
            <div class=" font-16">武汉安邦致远科技有限公司</div>
          </div>
          <div class="flex-2 font-16">山东高速路桥建设有限公司</div>
          <div class="flex-1 text-center font-16 flex justify-center">
            <div class="end">公示结束</div>
          </div>
          <div class="flex-1 text-center font-16">2025-07-16</div>
        </div>
        <div class="flex items-center w-full h-[80px] border-top-dashed">
          <div class="flex-2">
            <div></div>
            <div class=" font-16">武汉安邦致远科技有限公司</div>
          </div>
          <div class="flex-2 font-16">山东高速路桥建设有限公司</div>
          <div class="flex-1 text-center font-16 flex justify-center">
            <div class="end">公示结束</div>
          </div>
          <div class="flex-1 text-center font-16">2025-07-16</div>
        </div>
        <div class="flex items-center w-full h-[80px] border-top-dashed">
          <div class="flex-2">
            <div></div>
            <div class=" font-16">武汉安邦致远科技有限公司</div>
          </div>
          <div class="flex-2 font-16">山东高速路桥建设有限公司</div>
          <div class="flex-1 text-center font-16 flex justify-center">
            <div class="end">公示结束</div>
          </div>
          <div class="flex-1 text-center font-16">2025-07-16</div>
        </div>
        <div class="flex items-center w-full h-[80px] border-top-dashed">
          <div class="flex-2">
            <div></div>
            <div class=" font-16">武汉安邦致远科技有限公司</div>
          </div>
          <div class="flex-2 font-16">山东高速路桥建设有限公司</div>
          <div class="flex-1 text-center font-16 flex justify-center">
            <div class="end">公示结束</div>
          </div>
          <div class="flex-1 text-center font-16">2025-07-16</div>
        </div>
        <div class="flex items-center w-full h-[80px] border-top-dashed">
          <div class="flex-2">
            <div></div>
            <div class=" font-16">武汉安邦致远科技有限公司</div>
          </div>
          <div class="flex-2 font-16">山东高速路桥建设有限公司</div>
          <div class="flex-1 text-center font-16 flex justify-center">
            <div class="end">公示结束</div>
          </div>
          <div class="flex-1 text-center font-16">2025-07-16</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.xin-container {
  height: 600px;
  display: flex;
  align-items: center;
  gap: 24px;

  .xin-container-left {
    width: 277px;
    height: 100%;

    .top-content {
      width: 277px;
      height: 276px;
      border-radius: 4px;
      /* 蓝色渐变 */
      background: linear-gradient(270deg, #2c91eb 0%, #0973ca 100%);

      .merchant {
        &::after {
          content: '';
          height: 1px;
        }
      }
    }

    .supplier-management {
      width: 277px;
      height: 138px;
      background-image: url('@/assets/image/SupplierBg.png');
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: 24px;
      gap: 10px;
    }

    .breach-trust {
      width: 277px;
      height: 138px;
      background-image: url('@/assets/image/trustBg.png');
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: 24px;
      gap: 10px;
    }
  }

  .xin-container-right {
    width: calc(100% - 277px);
    height: 100%;

    .right-top {
      padding: 0 24px;
      width: 100%;
      height: 56px;
      border-radius: 4px;
      /* 蓝色渐变 */
      background: linear-gradient(270deg, #2c91eb 0%, #0973ca 100%);
      display: flex;
      align-items: center;
      font-size: 20px;
      font-weight: bold;
      line-height: normal;
      letter-spacing: 0;
      font-feature-settings: 'kern' on;
      color: #ffffff;
    }

    .right-content {
      height: calc(100% - 56px);
      padding: 0 24px;
      background: #E7F3FE;
      overflow: auto;
      ::-webkit-scrollbar {
        display: none; /* 隐藏滚动条 */
      }

      .end {
        width: 104px;
        height: 34px;
        line-height: 34px;
        border-radius: 4px;
        font-size: 18px;
        color: #FFFFFF;
        opacity: 1;
        /* 自动布局 */
        display: flex;
        flex-direction: column;
        background: linear-gradient(270deg, #CACACA 0%, #929292 100%);
      }
    }

    .border-top-dashed {
      border-top: 1px dashed rgba(38, 91, 232, 0.3);
    }
  }
}
</style>
